<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
  <title>浏阳旅游网-酒店预约</title>
  <link rel="stylesheet" type="text/css" th:href="@{/front-end/index.css}">
  <!-- 引入公用部分 -->
  <script th:replace="common/head::static"></script>
</head>
<body>
  <!-- nav部分 -->
  <div class="nav">
    <div class="layui-container">
      <div class="nav-logo">
        <a th:href="@{/travel/index}">
          <img th:src="@{/front-end/images/logo.png}" alt="浏阳旅游网">
        </a>
      </div>
      <div class="nav-list">
        <button>
          <span></span><span></span><span></span>
        </button>
        <ul class="layui-nav">
          <li class="layui-nav-item"><a th:href="@{/travel/index}">首页</a></li>
          <li class="layui-nav-item"><a th:href="@{/travel/scenic}">旅游景点</a></li>
          <li class="layui-nav-item layui-this"><a th:href="@{/travel/hotel/}">酒店预约</a></li>
          <li class="layui-nav-item"><a th:href="@{/travel/about}">关于</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- banner部分 -->
  <div class="banner case"  th:style="'background: url(' + @{/front-end/images/nav_img2.jpg} + ') no-repeat center top; background-size: cover;'">
    <div class="title">
      <p>酒店预约</p>
    </div>
  </div>
  <!-- main部分 -->
  <div class="main-case">
    <div class="layui-container">
      <div class="layui-row">
        <div class="layui-inline content" th:each="hotel, status : ${hotels}"
             th:class="${(status.count % 3) == 2} ? 'layui-inline content even center' : (${status.even} ? 'layui-inline content even' : 'layui-inline content')"
             th:id="${hotel.getHotelId()}"
             th:onclick="reservation([[${hotel.getHotelId()}]])" >
          <div class="layui-inline case-img"><img th:src="${hotel.getHotelPic()}" th:alt="${hotel.getHotelName()}"></div>
          <p class="lable"><span th:text="${hotel.getHotelName()}">酒店名称</span></p>
          <p><span th:text="${#strings.abbreviate(hotel.getHotelDesc(), 50)}">酒店介绍</span></p>
        </div>
        <div id="casePage"></div>
      </div>
    </div>
  </div>
  <!-- footer部分 -->
  <div class="footer">
    <div class="layui-container">
      <div class="layui-row footer-contact">
        <div class="layui-col-sm10 layui-col-lg11">
          <div class="layui-row">
            <div class="layui-col-sm6 layui-col-md8 layui-col-lg9">
              <p class="contact-top"><i class="layui-icon layui-icon-cellphone"></i>&nbsp;400-8888888&nbsp;&nbsp;&nbsp;(9:00-18:00)</p>
              <p class="contact-bottom"><i class="layui-icon layui-icon-home"></i>&nbsp;88888888@163.com</p>
            </div>
            <div class="layui-col-sm6 layui-col-md4 layui-col-lg3">
              <p class="contact-bottom"><span class="right">Copyright&nbsp;©&nbsp;2016-2020&nbsp;&nbsp;ICP&nbsp;备888888号</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- js -->
<script type="text/javascript" th:src="@{/front-end/firm.js}"></script>
<script type="text/javascript" th:inline="javascript">
  layui.use('layer', function(){
    const layer = layui.layer;
    const url = ctx + '/travel/hotel/reservation';
    window.reservation = function (id) {
      const hotelID = id;
      layer.open({
        type: 2,
        title: '预约详情',
        shade: [0.8],
        id: 'reservation',
        area: ['450px', '670px'],
        resize: false,
        shadeClose: true,  // 点击任意处关闭
        content: [url + '?id=' + hotelID],  // 内嵌iframe路径
        success: function(layero, index) {
          const body = layer.getChildFrame('body', index);  // 获取子窗口body
          console.log(body.html()); //得到iframe页的body内容
          body.find('#hotelId').val(hotelID);
        }
      });
    }
  });
</script>
</body>
</html>